<template>
  <div id="thingcontent">
    <div class="title">
      <div class="price">￥799</div>
      <div class="name">荣耀 Magic 悬浮键盘 深灰色</div>
      <div class="preferential">适配平板V7 Pro</div>
    </div>

    <div class="promot">
      <div class="name1">促销</div>
      <div class="right">
        <span class="give">赠送积分</span>
        <span class="cash">购买即赠商城积分，积分可抵现</span>
        <div class="icon" @click="showPopup()"></div>
        <van-popup
          v-model="show"
          closeable
          close-icon="close"
          position="bottom"
          :style="{ height: '60%' }"
        >
          <p class="name2">促销</p>
          <span class="give1">赠送积分</span>
          <span class="cash1">购买即赠商城积分，积分可抵现</span>
        </van-popup>
      </div>
    </div>

    <div class="kind">
      <div class="color-more">
        <div class="color-left">颜色</div>
        <div class="goods">
          <div class="pho">
            <img
              src="https://hshop.honorfile.com/pimages//product/6973316858761/428_428_0D9DE3D248C14748E32C825708FDF74A4DF368A7ED7F3F3Cmp.png"
              alt=""
            />
          </div>
          <div class="name3">深灰色</div>
        </div>
      </div>

      <div class="number">
        <div class="quantity">数量</div>
        <van-stepper v-model="value" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      value: 1,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    }
  },
};
</script>

<style scoped>
#thingcontent {
  background-color: #f9f9f9;
}
.title {
  background-color: white;
}
.price,
.name {
  width: 20.625rem;
  margin: 0.3125rem auto;
  font-size: 1rem;
  font-weight: 700;
}
.preferential {
  width: 20.625rem;
  height: 1.875rem;
  margin: 0 auto;
  font-size: 0.75rem;
  line-height: 1.5rem;
  color: gray;
  border-bottom: 1px solid rgb(227, 224, 224);
}
.promot {
  width: 20.625rem;
  height: 2.75rem;
  margin: 0 auto;
  display: flex;
  /* border-bottom: 1px solid rgb(227, 224, 224); */
  background-color: white;
}
.name1 {
  width: 14%;
  font-size: 0.75rem;
  line-height: 1.5rem;
  font-weight: 700;
  /* background-color: pink; */
  margin-top: 0.625rem;
}
.right {
  width: 86%;
  margin-top: 0.75rem;
  display: flex;
}
.give,.give1 {
  font-size: 0.75rem;
  height: 1rem;
  color: blue;
  border: 1px solid blue;
  border-radius: 0.625rem;
  /* margin-left:.625rem; */
}
.give2{
  font-size: 0.75rem;
  margin-left: 0.625rem;
}
.cash,
.cash1 {
  font-size: 0.75rem;
  margin-left: 0.625rem;
}
.icon,.icon1 {
  width: 1.25rem;
  height: 1.25rem;
  /* background-color: pink; */
  margin-left: 1.875rem;
  background: url(https://hshop.honorfile.com/nwap/221030101/images/echannelWap/icon/icon-more-right.png);
  background-size: 1.5625rem 1.5625rem;
}
.name2 {
  margin-left: 0.625rem;
  font-weight: 700;
}
.give1 {
  margin-left: 0.625rem;
}
.kind {
  width: 20.625rem;
  height: 10.625rem;
  background-color: white;
  margin: 0 auto;
  margin-top: 0.3125rem;
  overflow: hidden;
}
.color-more {
  height: 7.375rem;
  display: flex;
  margin-top: 0.625rem;
}
.color-left {
  width: 14%;
  font-size: 0.75rem;
  line-height: 1.5rem;
  font-weight: 700;
  margin-top: 0.625rem;
}
.goods {
  width: 4.6875rem;
  height: 5.9375rem;
  border: 1px solid blue;
  border-radius: 0.625rem;
}
.pho {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0.3125rem auto;
}
.pho img {
  width: 100%;
}
.name3 {
  /* width: 4.375rem; */
  font-size: 0.75rem;
  text-align: center;
  margin-top: 0.875rem;
  color: blue;
}
.number {
  display: flex;
}
.quantity {
  width: 14%;
  font-size: 0.75rem;
  line-height: 1.5rem;
  font-weight: 700;
  margin-top: 0.3125rem;
}

.send-to {
  height: 5rem;
  margin-top: 0.3125rem;
  display: flex;
}
.send-left {
  width: 14%;
  font-size: 0.75rem;
  line-height: 1.5rem;
  font-weight: 700;
  margin-top: 0.3125rem;
}
.send-right {
  display: flex;
}
.phot {
  width: 0.8125rem;
  height: 0.8125rem;
  background: url(https://hshop.honorfile.com/nwap/221030101/images/echannelWap/icon/icon_discount_blue.png)
    no-repeat;
  background-size: 0.8125rem 0.8125rem;
  float: left;
  margin-top: 0.3125rem;
}
.pname {
  float: left;
  font-size: 0.75rem;
  margin-top: 0.3125rem;
}
</style>